<template>
  <div v-loading="loading">
    <div class="doctor-list">
      <SelectForm @hosipitorChange="hosipitorChange" @nameChange="nameChange" />
      <template v-if="listData.length">
        <DoctorCard :listData="listData" />
      </template>
      <el-empty description="暂无数据" v-else></el-empty>
      <FenYe
        :formInline="formInline"
        @formInlineChange="formInlineChange"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import SelectForm from "./SelectForm.vue";
import DoctorCard from "./DoctorCard.vue";
import FenYe from "./FenYe.vue";

export default {
  name: "doctor-list",
  components: {
    SelectForm,
    DoctorCard,
    FenYe,
  },
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 6,
      },
      listData: [],
      totalListData: [],
      params: {
        doctorName: "",
        hosipitor: "",
      },
      loading: true,
    };
  },
  computed: {
    total() {
      return this.cardTotalData.length;
    },
    cardTotalData() {
      const { doctorName, hosipitor } = this.params;
      let selectedData1 = [],
        selectedData2 = [];
      if (!(hosipitor || doctorName)) {
        return this.totalListData;
      }
      if (hosipitor) {
        selectedData1 = this.totalListData.filter((item) => {
          return item.location === hosipitor;
        });
      } else {
        selectedData1 = this.totalListData;
      }
      if (doctorName) {
        selectedData2 = selectedData1.filter((item) => {
          return item.name.indexOf(doctorName) > -1;
        });
      }
      return doctorName ? selectedData2 : selectedData1;
    },
  },
  mounted() {
    this.getDoctorListData();
  },
  watch: {
    cardTotalData: {
      handler(val) {
        this.changeListData();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    formInlineChange(formInline) {
      this.formInline = formInline;
      this.changeListData();
    },
    getDoctorListData() {
      this.loading = true;
      this.axios
        .get("doctor/doctor_list")
        .then((res) => {
          this.totalListData = res.data.data ? res.data.data : [];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeListData() {
      const { pageNum, pageSize } = this.formInline;
      this.listData = this.cardTotalData.slice(
        (pageNum - 1) * pageSize,
        pageNum * pageSize
      );
    },
    hosipitorChange(params) {
      this.$set(this.params, "hosipitor", params.hosipitor);
    },
    nameChange(params) {
      this.$set(this.params, "doctorName", params.doctorName);
    },
  },
};
</script>
